import React, { useState,useEffect,useRef,Fragment } from "react";
import { FloatButton,Tooltip,Modal,notification,Alert,Statistic,Affix } from 'antd';
import Question from './Question'


export default function RandomQuestions(props) {
  const { questions } = props
  const { Countdown } = Statistic;
  const {questionList,standardCount,time = 120,name = 'Salesforce'} = questions;
  const noRepeatRandom = number => {
    const arr = [...Array(number).keys()]
    arr.sort(()=>0.5 - Math.random())
    arr.length = standardCount
    return arr
  }
  const openNotification = (val) => {
    notification.open({
      message: '最终成绩',
      description:<Statistic value={val} suffix={'/'+standardCount}/>,
      duration:60
    });
  };
  const deadline = useRef(Date.now() + 1000 * 60 * time)
  const [numbers, setNumbers] = useState([])
  const [submit, setSubmit] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [score, setScore] = useState([...Array(standardCount)])
  const onSubmit = () =>{
    let totleScore = []
    setIsModalOpen(false)
    totleScore = score.filter(item => item === 1)
    openNotification(totleScore.length)
    setSubmit(true)
  }
  useEffect(() => {
    setNumbers(noRepeatRandom(questionList.length - 1))
  }, []);
  return (
    <div>
        <Fragment>
          {!submit?<Affix><div style={{textAlign: 'right'}}><Countdown title={name} value={deadline.current} onFinish={()=>onSubmit()} /></div></Affix>:null}
            {submit?<Alert message="只显示错题和被标记的题" type="success"/>:null}
            {numbers.map((item,index)=>(<Question key={index} displayFlag={submit && score[index] === 1} submit={submit} setScore={setScore} index={index} score={score} {...questionList[item]} generrateRandomOrder/>))}
          {!submit?<Tooltip title="交卷"><FloatButton onClick={()=>setIsModalOpen(!isModalOpen)} type="primary" style={{ right: 24 }}/></Tooltip>:null}
          <Modal open={isModalOpen} onOk={()=>onSubmit()} onCancel={()=>setIsModalOpen(!isModalOpen)}>
            <p>确认交卷吗？</p>
          </Modal>
        </Fragment>
    </div>
  )
}
